<template>
  <el-select
    v-model="value"
    v-bind="extend"
    :id="'c' + columnId"
    :name="'c' + columnId"
    :size="size"
    :clearable="clearable"
    multiple
    filterable
    allow-create
    default-first-option
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import { defineComponent } from 'vue'
  import { ElSelect, ElOption } from 'element-plus'
// 引入组件需要的属性 引入表单子控件的管理类
import { itemProps, itemController, loadController } from '../../map'

export default defineComponent({
  name: 'el-from-selwrite',
  inheritAttrs: false,
  components: {
    ElSelect,
    ElOption
  },
  props: {
    modelValue: [String, Number, Array],
    ...itemProps // 基础属性
  },
  emits: ['update:modelValue'],
  setup (props, context) {
    const { value } = itemController(props, context.emit)

    const options = {
      options: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }, {
        value: 'JavaScript',
        label: 'JavaScript'
      }],
      value: []
    }

    // 从后端获取数据
    const { loadDict } = loadController(props)
    loadDict()

    return {
      value,
      options
    }
  }
})
</script>
